<!DOCTYPE html>
<html>
<head>
<%include("../../tpl/head_jqgrid.html"){}%>
<title>后台管理-账户管理</title>
<link href="http://cdn.bootcss.com/zTree.v3/3.5.24/css/metroStyle/metroStyle.min.css" rel="stylesheet">
</head>
<body class="hold-transition fixed skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 头部 -->
		<%include("../../tpl/header.html",{menus:menus}){}%>
		<!-- 网页正文 -->
		<div class="content-wrapper">
			<!-- 网页正文-面包屑 -->
			<div class="content-header">
				<h1>账户管理</h1>
				<ol class="breadcrumb">
					<li><a href="/admin/index.jspx"><i class="fa fa-dashboard"></i> 后台系统</a></li>
					<li><a href="#">用户管理</a></li>
					<li class="active">账户管理</li>
				</ol>
			</div>
			<!-- 网页正文-主体 -->
			<section class="content">
				<table id="jqGrid"></table>
				<div id="jqGridPager"></div>
			</section>
			<!-- /.content -->
		</div>
		<!-- 网页底部 -->
		<%include("../../tpl/footer.html"){}%>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">配置角色</h4>
				</div>
				<div class="modal-body">
					<ul id="zTree" class="ztree"></ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="save_role_btn">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">重置密码</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="changePasswordForm">
						<div class="box-body">
							<div class="form-group">
								<label class="col-sm-2 control-label">新密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" name="password" placeholder="请输入密码">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">确认密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" name="password_again" placeholder="请重新输入密码">
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
					<button type="submit" form="changePasswordForm" class="btn btn-primary">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<%include("../../tpl/script_jqgrid.html"){}%>
	<script src="http://cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// Ztree 配置
			var setting = {
				view : {
					selectedMulti : false
				},
				check : {
					enable : true
				},
				data : {
					simpleData : {
						enable : true
					}
				}
			};
			// 保存用户角色
			$("#save_role_btn").on('click', function() {
				var $modal = $('#myModal');
				var treeObj = $.fn.zTree.getZTreeObj("zTree");
				var nodes = treeObj.getCheckedNodes();
				var param = {
					account : $modal.data('account'),
					ids : []
				};
				for ( var tmp in nodes) {
					param.ids.push(nodes[tmp].id);
				}
				Ajax.json('role/save.json', param, function(result) {
					$modal.modal('hide');
				});
			})
			// 修改密码模态框显示事件
			$('#changePasswordModal').on('show.bs.modal', function(e) {
				var account = $(e.relatedTarget).data('account');
				$(this).data('account', account);
			})
			// 重置密码-保存按钮点击事件
			$('#changePasswordForm').on('submit', function() {
				var param = {
					'account' : $('#changePasswordModal').data('account')
				};
				$.each($(this).serializeArray(), function() {
					param[this.name] = this.value;
				})
				Ajax.post('password.json', param, function(result) {
					layer.msg("密码已重置", {
						icon : 1,
						time : 1500
					});
					$('#changePasswordModal').modal('hide');
				});
				return false;
			})
			// 初始化表格
			jqGrid.init({
				page : '${page!1}',
				colModel : [ {
					label : '操作',
					align : 'center',
					width : 80,
					resizable : false,
					formatter : function(value, coulmn, data) {
						return '<button type="button" class="btn btn-primary btn-xs" data-account="'+data.account+'" data-toggle="modal" data-target="#changePasswordModal">重置密码</button>';
					}
				}, {
					label : '头像',
					name : 'icon',
					sortable : false,
					resizable : false,
					formatter : function(value, coulmn) {
						return '<img src="'+value+'" style="max-height: 19px;"/>';
					}
				}, {
					label : '账号',
					name : 'account',
					index : 'account',
					editable : true,
					key : true,
					resizable : false
				}, {
					label : '用户名',
					name : 'name',
					editable : true,
					resizable : false
				}, {
					label : '手机号',
					name : 'phone',
					editable : true
				}, {
					label : '邮箱',
					name : 'email',
					editable : true
				}, {
					label : 'QQ',
					name : 'qq',
					editable : true
				}, {
					label : '创建时间',
					name : 'createTime',
					resizable : false
				} ],
				ondblClickRow : function(rowid, iRow, iCol, e) {
					Ajax.post('role/list.json', {
						account : rowid
					}, function(result) {
						$.fn.zTree.destroy();
						var ztree = $.fn.zTree.init($("#zTree"), setting, result.data);
						var $modal = $('#myModal');
						$modal.data('account', rowid);
						$modal.modal('show');
					})
				}
			});
			jqGrid.initNav();
		});
	</script>
</body>
</html>
